<template>
  <div class="page-argsetting">
    <ul class="arg-header" v-if="tempArgs.length > 0">
      <li>参数名称</li>
      <li>英文名称</li>
      <li>参数类型</li>
      <li>默认值</li>
    </ul>
    <div class="arg-tip" v-if="tempArgs.length === 0">请添加参数</div>
    <Form class="arg-form" v-for="(item,index) of tempArgs" :key="index" v-else>
      <FormItem>
        <Input v-model.trim="item.desc" placeholder="请输入参数名" clearable :maxlength="20"/>
      </FormItem>
      <FormItem>
        <Input v-model.trim="item.name" placeholder="请输入英文名" clearable :maxlength="100"/>
      </FormItem>
      <FormItem>
        <Select v-model="item.formEditType" @on-change="changeFormType(item)">
          <Option v-for="item in formEditTypeList" :value="item.id" :key="item.id">{{ item.value }}</Option>
        </Select>
      </FormItem>
      <FormItem style="width: 52%">
        <Input
          v-model.trim="item.defaultValue"
          placeholder="请输入参数默认值"
          v-if="item.formEditType === 'string' || !item.formEditType"
        />
        <InputNumber
          v-model.trim="item.defaultValue"
          placeholder="请输入参数默认值"
          v-if="item.formEditType === 'int'"
          style="width:100%"
          :precision="0"
        />
        <template v-if="item.formEditType === 'file'">
          <AutoComplete
            style="width: 90%"
            :key="new Date().getTime()"
            :value="item.defaultValue"
            @autoBlur="argChange($event,index)"
          />
          <i class="iconfont icon-file" @click="argFileHandler(item.defaultValue,index)"/>
        </template>

        <RadioGroup
          v-model="item.defaultValue"
          v-if="item.formEditType === 'bool'"
          style="text-align:center"
        >
          <Radio :label="true"></Radio>
          <Radio :label="false"></Radio>
        </RadioGroup>
      </FormItem>
      <i class="iconfont icon-trash" @click="argDel(index)" style="margin-left:10px"></i>
    </Form>

    <div class="arg-add-icon">
      <Icon type="ios-add-circle-outline" @click="addArg"/>
    </div>
    <div class="arg-footer">
      <Button  @click="cancelHandler" style="margin-right:8px">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>

    <!-- 参数文件 -->
    <Modal footer-hide title="选择文件" v-model="argfileVisible" width="700px">
      <filedata
        :filePath="argfileValue"
        v-if="argfileVisible"
        @cancelHandler="argfileVisible=false"
        @okHandler="argfileOkHandler"
      />
    </Modal>
  </div>
</template>

<script>
import Filedata from '../Common/Filedata';
import AutoComplete from '../Common/AutoComplete';

export default {
  props: ['args'],
  components: {
    Filedata,
    AutoComplete
  },
  data () {
    return {
      tempArgs: [],
      formEditTypeList: [
        {
          id: 'string',
          value: '文本'
        },
        {
          id: 'int',
          value: '整型'
        },
        {
          id: 'file',
          value: '文件'
        },
        {
          id: 'bool',
          value: '布尔值'
        }
      ],
      // 参数文件的选择
      argfileValue: '',
      argfileIndex: null,
      argfileVisible: false
    };
  },
  methods: {
    // 参数改变
    argChange (e, index) {
      this.tempArgs[index].defaultValue = e;
    },

    // 改变form类型
    changeFormType (item) {
      let { formEditType } = item;
      switch (formEditType) {
        case 'int':
          item.defaultValue = 0;
          break;

        case 'bool':
          item.defaultValue = true;
          break;

        default:
          item.defaultValue = '';
      }
    },

    // 参数文件选择
    argFileHandler (value, index) {
      this.argfileValue = value;
      this.argfileIndex = index;
      this.argfileVisible = true;
    },

    // 参数文件选择后
    argfileOkHandler (url) {
      this.tempArgs[this.argfileIndex].defaultValue = url;
      this.argfileVisible = false;
    },

    // 确定
    okHandler () {
      // 校验
      let isChecked = true;
      let names = [];
      let descs = [];

      this.tempArgs.forEach(item => {
        if (!item.name || !item.desc || !item.formEditType) {
          isChecked = false;
        }

        names.push(item.name);
        descs.push(item.desc);
      });

      if (!isChecked) {
        this.$Message.error('存在未填写的数据');
        return;
      }

      // 重复名字提示
      if (new Set(descs).size < descs.length) {
        this.$Message.error('参数的中文名称不可有重复');
        return;
      }
      if (new Set(names).size < names.length) {
        this.$Message.error('参数的英文名称不可有重复');
        return;
      }

      let isEnglish = true;

      names.find(item => {
        if (!/^[a-zA-Z]*$/.test(item)) {
          isEnglish = false;
        }
      });
      if (!isEnglish) {
        this.$Message.error('英文名称必须是英文');
        return;
      }

      this.$emit('okHandler', this.tempArgs);
    },

    // 取消
    cancelHandler () {
      this.$emit('cancelHandler');
    },

    // 新增参数
    addArg () {
      let obj = {
        defaultValue: '',
        formEditType: 'string',
        name: '',
        value: ''
      };

      this.tempArgs.push(obj);
    },

    // 删除参数
    argDel (index) {
      this.tempArgs.splice(index, 1);
    }
  },
  mounted () {
    if (this.args) {
      this.tempArgs = JSON.parse(JSON.stringify(this.args));
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less">
.page-argsetting {
  .ivu-form-item {
    width: 15%;
    display: inline-block;
  }
  .arg-add-icon {
    text-align: center;
    cursor: pointer;
    .ivu-icon-ios-add-circle-outline {
      font-size: 30px;
    }
  }

  .arg-footer {
    text-align: right;
  }

  .arg-form {
    position: relative;
    .icon-trash {
      position: absolute;
      right: -7px;
      top: 5px;
      cursor: pointer;
    }
  }

  .arg-header {
    margin-bottom: 8px;
    li {
      display: inline-block;
      width: 15%;
      text-align: center;
      font-weight: bold;
    }
  }

  .arg-tip {
    font-size: 16px;
  }

  .file-input {
    width: 90%;
    position: relative;
    top: -2px;
  }

  .icon-file {
    color: #888888;
    font-size: 16px;
    position: relative;
    left: 5px;
    cursor: pointer;
  }
}
</style>
